<template>
    <view class="booking-list">
        <!-- 状态分类 -->
        <view class="tab-bar">
            <view class="tab-item" v-for="(tab, index) in tabs" :key="index" :class="{ active: currentTab === index }"
                @tap="switchTab(index)">
                <text>{{ tab }}</text>
            </view>
        </view>

        <scroll-view class="list-container" scroll-y refresher-enabled :refresher-triggered="isRefreshing"
            @refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
            <template v-if="bookingList.length">
                <view class="booking-item" v-for="(item, index) in bookingList" :key="index">
                    <view class="booking-header">
                        <text class="type">{{ item.type === '1' ? '接站' : '送站' }}</text>
                        <text class="status" :class="getStatusCss(item.status)">{{ getStatusText(item.status) }}</text>
                    </view>
                    <view class="booking-info">
                        <view class="info-item">
                            <text class="label">预约时间：</text>
                            <text class="value">{{ item.bookingTime }}</text>
                        </view>
                        <view class="info-item">
                            <text class="label">{{ item.type === '1' ? '到站时间：' : '用车时间：' }}</text>
                            <text class="value">{{ item.arrivalTime }}</text>
                        </view>
                        <view class="info-item">
                            <text class="label">车站名称：</text>
                            <text class="value">{{ item.stationName }}</text>
                        </view>
                        <view class="info-item" v-if="item.type === '2'">
                            <text class="label">房间号：</text>
                            <text class="value">{{ item.roomNo }}</text>
                        </view>
                        <view class="info-item" v-if="item.type === '1'">
                            <text class="label">入住时间：</text>
                            <text class="value">{{ item.bookingTime }}</text>
                        </view>
                        <view class="info-item">
                            <text class="label">乘客姓名：</text>
                            <text class="value">{{ item.username }}</text>
                        </view>
                        <view class="info-item">
                            <text class="label">联系方式：</text>
                            <text class="value">{{ item.phone }}</text>
                        </view>
                        <view class="info-item">
                            <text class="label">出行人数：</text>
                            <text class="value">{{ item.personCount }}人</text>
                        </view>
                        <view class="info-item">
                            <text class="label">备注信息：</text>
                            <text class="value">{{ item.remark || '无' }}</text>
                        </view>
                        <view v-if="item.status != '1' && item.status != '3'" style="border-top: 1px solid #ddd;">
                            <view class="info-item">
                                <text class="label">车辆信息：</text>
                                <text class="value">{{ item.carDesc }}</text>
                            </view>
                            <view class="info-item">
                                <text class="label">司机姓名：</text>
                                <text class="value">{{ item.driverName }}</text>
                            </view>
                            <view class="info-item">
                                <text class="label">联系方式：</text>
                                <text class="value">{{ item.driverPhone }}</text>
                            </view>
							<view class="info-item" v-if="item.status == '4'">
							    <text class="label">出发时间：</text>
							    <text class="value">{{ item.confirmTime }}</text>
							</view>
							<view class="info-item" v-if="item.status == '5'">
							    <text class="label">出发时间：</text>
							    <text class="value">{{ item.departureTime }}</text>
							</view>
							<view class="info-item" v-if="item.status == '2'">
							    <text class="label">完成时间：</text>
							    <text class="value">{{ item.completeTime }}</text>
							</view>
                        </view>
                    </view>
                    <!-- 待出行的可以修改和取消 -->
                    <view class="booking-footer" v-if="item.status === '1'">
                        <view class="btn-group">
                            <text class="btn cancel" @tap="handleCancel(item)">取消预约</text>
                            <text class="btn edit" @tap="handleEdit(item)">修改预约</text>
                        </view>
                    </view>
                </view>
                <!-- 加载更多提示 -->
                <view class="loading-more" v-if="hasMore">
                    <text>加载中...</text>
                </view>
                <view class="no-more" v-else>
                    <text>没有更多了</text>
                </view>
            </template>
            <view v-else class="empty-state">
                <text>暂无数据</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { bookingApi } from '@/api'

export default {
    onShow() {
        this.resetList()
    },
    data() {
        return {
            tabs: ['全部', '待出行', '已完成'],
            currentTab: 0,
            bookingList: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            isRefreshing: false,
            isLoading: false
        }
    },
    computed: {
        hasMore() {
            return this.bookingList.length < this.total
        }
    },
    methods: {
        switchTab(index) {
            if (this.currentTab === index) return
            this.currentTab = index
            this.resetList()
        },

        resetList() {
            this.pageNum = 1
            this.bookingList = []
            this.getBookingList()
        },

        getBookingList() {
            if (this.isLoading) return
            this.isLoading = true

            bookingApi.getBookingList({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                status: this.currentTab === 0 ? '' : this.currentTab
            }).then(res => {
                if (this.pageNum === 1) {
                    this.bookingList = res.rows
                } else {
                    this.bookingList = [...this.bookingList, ...res.rows]
                }
                this.total = res.total
            }).finally(() => {
                this.isLoading = false
                this.isRefreshing = false
            })
        },

        onRefresh() {
            this.isRefreshing = true
            this.resetList()
        },

        onLoadMore() {
            if (!this.hasMore || this.isLoading) return
            this.pageNum++
            this.getBookingList()
        },

        getStatusText(status) {
            const statusMap = {
                '1': '待出行',
                '2': '已完成',
                '3': '已取消',
                '4': '已确认',
                '5': '已出发',
            }
            return statusMap[status]
        },
        getStatusCss(status) {
            const statusMap = {
                '1': 'pending',
                '2': 'completed',
                '3': 'cancelled',
                '4': 'confirmed',
                '5': 'departed',
            }
            return statusMap[status]
        },
        handleEdit(item) {
            // 先将预约数据存到本地
            uni.setStorageSync('editBookingData', item)
            // 跳转到预约页面
            uni.switchTab({
                url: '/pages/booking/index'
            })
        },
        handleCancel(item) {
            uni.showModal({
                title: '提示',
                content: '确定要取消该预约吗？',
                success: (res) => {
                    if (res.confirm) {
                        uni.showLoading({
                            title: '取消中...'
                        })

                        bookingApi.deleteBooking({
                            id: item.id,
                            stationId: item.stationId,
                            status: 3
                        }).then(() => {
                            uni.hideLoading()
                            uni.showToast({
                                title: '取消成功',
                                icon: 'success'
                            })
                            this.resetList()
                        })
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss">
.booking-list {
    min-height: 100vh;
    background-color: #f8f8f8;

    .tab-bar {
        display: flex;
        background-color: #fff;
        padding: 20rpx 0;

        .tab-item {
            flex: 1;
            text-align: center;
            font-size: 28rpx;
            color: #666;
            position: relative;

            &.active {
                color: #1989fa;
                font-weight: 500;

                &::after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    bottom: -10rpx;
                    transform: translateX(-50%);
                    width: 40rpx;
                    height: 4rpx;
                    background: #1989fa;
                    border-radius: 2rpx;
                }
            }
        }
    }

    .list-container {
        padding: 20rpx;
        box-sizing: border-box;

        .booking-item {
            background-color: #fff;
            border-radius: 12rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;

            .booking-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20rpx;

                .type {
                    font-size: 28rpx;
                    color: #333;
                    font-weight: 500;
                }

                .status {
                    font-size: 26rpx;

                    &.pending {
                        color: #87CEFA;
                    }

                    &.completed {
                        color: #52c41a;
                    }

                    &.cancelled {
                        color: #808080;
                    }

                    &.confirmed {
                        color: #1989fa;
                    }

                    &.departed {
                        color: #1989fa;
                    }
                }
            }

            .booking-info {
                .info-item {
                    display: flex;
                    margin-bottom: 10rpx;

                    .label {
                        font-size: 26rpx;
                        color: #999;
                        width: 160rpx;
                    }

                    .value {
                        flex: 1;
                        font-size: 26rpx;
                        color: #333;
                    }
                }
            }

            .booking-footer {
                margin-top: 30rpx;

                .btn-group {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;

                    .btn {
                        padding: 12rpx 30rpx;
                        font-size: 26rpx;
                        border-radius: 30rpx;
                        margin-left: 20rpx;

                        &.cancel {
                            color: #666;
                            border: 2rpx solid #ddd;

                            &:active {
                                opacity: 0.8;
                            }
                        }

                        &.edit {
                            color: #1989fa;
                            border: 2rpx solid #1989fa;

                            &:active {
                                opacity: 0.8;
                            }
                        }
                    }
                }
            }
        }
    }

    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 200rpx;

        image {
            width: 200rpx;
            height: 200rpx;
            margin-bottom: 20rpx;
        }

        text {
            font-size: 28rpx;
            color: #999;
        }
    }

    .loading-more,
    .no-more {
        text-align: center;
        padding: 20rpx 0;

        text {
            font-size: 24rpx;
            color: #999;
        }
    }
}
</style>